<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      :right-text="rightText"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

/**
 * 1. 左侧文字不需要，所以要找到对应的属性删掉
 * 2. 修改样式，左侧箭头字体大小颜色 右侧文案字体大小
 * 3. 固定到顶部 会有什么问题？内容被遮住了
 *       解决方案一（是整个医疗项目使用的方案） 添加内边距 padding-top:46px(摸content的高度的)
 *       解决方案二 加属性placeholder
 *   注意：两个方案使用其中一个就可以了，在医疗项目里用的是方案一，组件上placeholder属性记得删除
 * 4. 定制标题和右侧按钮文字显示 实现方式用父传子
 * 5. 右侧按钮自定义事件
 * 6. 返回功能
 *
 */
const props = defineProps<{
  title?: string
  rightText?: string
  back?: () => void
}>()
const emit = defineEmits<{
  (e: 'click-right'): void
}>()
const router = useRouter()

const onClickLeft = () => {
  if (props.back) {
    return props.back()
  }
  if (history.state?.back) {
    router.back()
  } else {
    router.push('/')
  }
}
const onClickRight = () => {
  emit('click-right')
}
</script>

<style scoped lang="scss">
/**
    vue2 - 深度选择器
    /deep/ less
    ::v-deep scss/sass
    >>>  原生css

    vue3 - 深度选择器
    语法一
    :deep() {

    }
    语法二
    :deep(选择器) {

    }
*/
:deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }
    &__text {
      font-size: 15px;
    }
  }
}
</style>
